<template>
	<div id="city" class="container">
		<h3 class="title"><span />城市管理</h3>
		<el-button
			type="primary"
			class="add four"
			icon="el-icon-plus"
			size="small"
			style="margin-bottom: 15px"
			@click="add"
			>添加城市</el-button
		>
		<el-table
			:data="cityList"
			border
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }"
		>
			<el-table-column label="ID" width="80px" prop="id" />
			<el-table-column label="城市名" prop="title" />
			<el-table-column label="添加时间" prop="create_time" />
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="small" class="edit" @click="edit(scope.row)">编辑</el-button>
					<el-button size="small" class="dele" @click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<BouncedDialog
			:title="addForm.id ? '编辑' : '添加'"
			:dialog-show.sync="dialogShow"
			width="50%"
			class="inner"
		>
			<el-form
				ref="addForm"
				:model="addForm"
				:rules="rules"
				inline
				class="addForm"
				label-width="80px"
			>
				<el-form-item label="城市名:" prop="title">
					<el-input v-model="addForm.title" placeholder="请输入城市名" />
				</el-form-item>
				<div class="btn">
					<el-button @click="dialogShow = false">取 消</el-button>
					<el-button type="primary" @click="submit()">确 定</el-button>
				</div>
			</el-form>
		</BouncedDialog>
	</div>
</template>

<script>
import cityApi from '@/api/job.js'
export default {
	data() {
		return {
			cityList: [],
			addForm: {
				title: '',
			},
			rules: {
				title: [{ required: 'true', message: '请输入城市名', trigger: 'blur' }],
			},
			dialogShow: false,
		}
	},
	created() {
		this.getList()
	},
	methods: {
		//   城市列表
		getList() {
			cityApi.jobCityList().then((res) => {
				this.cityList = res.data
			})
		},
		// 添加
		add() {
			this.addForm.id = ''
			this.addForm.title = ''
			this.dialogShow = true
		},
		// 编辑
		edit(row) {
			this.addForm.id = row.id
			this.addForm.title = row.title
			this.dialogShow = true
		},
		// 提交
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					if (!this.addForm.id) {
						cityApi.jobCitySave({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					} else {
						cityApi.jobCityUpdate({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.error('请填写必要信息')
				}
			})
		},
		// 删除
		del(row) {
			this.$confirm('此操作将永久删除该城市, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					cityApi.jobCityDelete({ id: row.id }).then((res) => {
						if (res.code == 0) {
							this.$message.success('已删除')
							this.getList()
						} else {
							this.$message.error('删除失败')
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
	},
}
</script>
<style lang="scss">
#city {
	.addForm {
		.el-form-item {
			width: 100%;
		}
		.el-form-item__content {
			width: calc(100% - 80px);
		}
	}
}
</style>
<style scoped lang="scss"></style>
